<%- include layout/header.html %>

<h1><%= movie.title %></h1>

<div class="links">
  <a href="/">Home</a> | 
  <a href="#" onclick="javascript:window.history.back(-1);return false;">Back</a>
</div>

<div class="movie">
  <div class="poster">
    <img src="<%= movie.poster_path %>" alt="poster" />
  </div>

  <div class="content">
    <ul>
      <li>
        <span class="attribute">Release date</span>
        <span class="info">
          <%= movie.release_date %>
        </span>
      </li>

      <li>
        <span class="attribute">Rating</span>
        <span class="info">
          <%= movie.vote_average %>
        </span>
      </li>

      <li>
        <span class="attribute">Genres</span>
        <span class="info">
          <%=: movie.genres | map:'name' | join %>
        </span>
      </li>

      <% if (movie.trailers && movie.trailers.youtube && movie.trailers.youtube[0]) { %>
        <li class="trailer">
          <span class="attribute">Watch trailer</span>
          <span class="info">
            <iframe width="420" height="315"
              src="https://www.youtube.com/embed/<%= movie.trailers.youtube[0].source %>"
              frameborder="0" allowfullscreen></iframe>
          </span>
        </li>
      <% } else { %>
        <li>
          <span class="attribute">
            No trailer
          </span>
        </li>
      <% } %>

      <li>
        <span class="attribute">Overview</span>
        <span class="info">
          <%= movie.overview %>
        </span>
      </li>

      <li class="cast">
        <span class="attribute">Cast</span>
        <span class="info">
          <% movie.cast.forEach(function(person) { %>
          <p class="person">
            <% if (person.details.profile_path) { %>
            <img src="<%= person.details.profile_path %>" alt="" />
            <% } %>

            <% if (person.details.homepage) { %>
              <a href="<%= person.details.homepage %>"><%= person.name %></a>
              (<%= person.character %>)
            <% } else { %>
              <%= person.name %> (<%= person.character %>)
            <% } %>
          </p>
          <% }); %>
        </span>
      </li>

    </ul>
  </div>
</div>

<%- include layout/footer.html %>
